<template>
  <div class="app-modal">
    <div class="app-modal-title">{{title}}</div>
    <div class="app-modal-b"><slot></slot></div>
    <div class="app-modal-close"
         @click="onClick"
    ><div class="app-modal-icon" :style="closeStyle"></div></div>
  </div>
</template>

<script>
let img = {
  close: 'https://oss.kaoyanvip.cn/uploads/file1574644797099.png'
}

export default {
  behaviors: [],
  properties: {
    title: String,
    icon: {
      type: String,
      value: img.close
    }
  },
  data() {
    return {
      img,
      closeStyle: ''
    }
  },
  attached() {
    this.setCloseStyle()
  },
  methods: {
    setCloseStyle() {
      this.setData({
        closeStyle: `background-image: url(${this.data.icon})`
      })
    },
    onClick() {
      this.$native.emit('close')
    }
  }
}
</script>

<style lang="scss">
  .app-modal {
    width: 580rpx;

    background:rgba(255,255,255,1);
    border-radius: 20rpx;
    box-sizing: border-box;
    position: relative;
    &-title {
      font-size: 32rpx;
      color: #252b33;
      line-height: 1;
      font-weight: bold;
      padding-top: 24rpx;
      padding-bottom: 24rpx;
      text-align: center;
    }
    &-close {
      position: absolute;
      right: 8rpx;
      top: 0rpx;
      display: block;
      padding: 30rpx;
      padding-top: 24rpx;
      box-sizing: border-box;
    }
    &-icon {
      width: 28rpx;
      height: 28rpx;
      background-size: 100%;
    }
  }
</style>
